<template>
  <div>
    <div class="dialogWallet">
      <div class="canvas animated">
        <div class="container-1">
          <div class="dialog-view">
            <div class="dialog-title">
              请连接到钱包
              <div class="common-close" @click="closeWallet">
                <img src="@/assets/images/close.png" />
              </div>
            </div>
            <div class="dialog-container">
              <div class="wallet-list" v-if="!errorText">
                <div class="wallet-item" @click="zilPay">
                  <div class="item-title">zilpay</div>
                  <div class="item-icon">
                    <img src="https://zilpay.io/icons/zilpay.svg" />
                  </div>
                </div>
              </div>
              <div class="wallet-list" v-else>
                <div class="errorText">{{ errorText }}</div>
                <div class="errorHref">
                  New to ZilPay? Download it
                  <a
                    href="https://chrome.google.com/webstore/detail/zilpay/klnaejjgbibmhlephnhpmaofohgkpgkd"
                    >here</a
                  >
                  !
                </div>
                <div class="Connect" @click="zilPay">Connect</div>
              </div>
            </div>
            <!---->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { connectWalletZilPay } from "./../plugins/zilpay";
export default {
  data: () => ({
    selected: 0,
    errorText: null,
    languageList: [
      { title: "简体中文", bgImg: require("@/assets/images/china.png") },
      { title: "English", bgImg: require("@/assets/images/theUSA.png") },
    ],
  }),
  methods: {
    changeLanguage(index) {
      this.selected = index;
    },
    closeWallet() {
      this.$emit("onCloseWallet");
    },
    async zilPay() {
      const zilPay = window.zilPay;
      if (typeof zilPay === "undefined") {
        //ZilPay 检测
        this.errorText = "ZilPay extension not installed";
        throw new Error("ZilPay extension not installed");
      }
      const result = await zilPay.wallet.connect();
      if (result !== zilPay.wallet.isConnect) {
        this.errorText = "ZilPay could not be connected to.";
        throw new Error("ZilPay could not be connected to.");
      }
      const walletResult = await connectWalletZilPay(zilPay);
      if (walletResult.error) throw walletResult.error;
      if (walletResult.wallet) {
        const { wallet } = walletResult;
        const { network } = wallet;
        console.log(wallet, network, "数据");
      }
    },
  },
};
</script>
<style  lang="scss" scoped>
@import "./../common/styles/common.scss";
.dialogWallet {
  .canvas {
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 201;
    position: fixed;
    background-color: transparent;
    -webkit-transition: backround-color 0.2s ease;
    transition: backround-color 0.2s ease;
    background: rgba(0, 0, 0, 0.5);
    .container-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #431216;
      opacity: 0;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(0.6);
      transform: translateX(-50%) translateY(-50%) scale(0.6);
      -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
      transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
      transition: transform 0.4s ease, opacity 0.4s ease;
      transition: transform 0.4s ease, opacity 0.4s ease,
        -webkit-transform 0.4s ease;
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
    .dialog-view {
      background: #fff;
      font-size: 14px;
      min-width: 320px;
      border-radius: 16px;
      @media screen and (max-width: 960px) {
        width: calc(100vw - 30px);
      }
    }

    .dialog-title {
      height: 74px;
      font-size: 20px;
      font-weight: 700;
      padding: 0 48px;
      position: relative;
      text-align: center;
      color: #431216;
      word-break: break-word;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      line-height: 1.1;
      @media screen and (max-width: 960px) {
        height: 60px;
        font-size: 18px;
        padding: 0 32px;
      }
      .common-close {
        position: absolute;
        cursor: pointer;
        right: 20px;
        height: 14px;
        width: 14px;
        top: 50%;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
        text-indent: -999em;
        text-indent: 0;
        -webkit-transform: translateY(-50%) rotate(0deg);
        transform: translateY(-50%) rotate(0deg);
        width: 18px;
        height: 18px;
      }
    }
    .dialog-container {
      padding: 0 28px;
      max-height: calc(100vh - 154px);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      @media screen and (max-width: 960px) {
        padding: 0 18px;
        max-height: calc(100vh - 140px);
      }
      .wallet-list {
        text-align: center;
        padding-bottom: 16px;
        width: 300px;
        @media screen and (max-width: 960px) {
          width: auto;
        }
        .wallet-item {
          -webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
          transition: background-color 0.2s ease, border-color 0.2s ease;
          outline: none;
          padding: 0 22px;
          height: 52px;
          border-radius: 12px;
          border: 1px solid #e8e8e8;
          margin-bottom: 14px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          cursor: pointer;
          &:hover {
            background-color: #fad551;
            border-color: #fad551;
          }
          .item-title {
            color: #431216;
            font-weight: 600;
            font-size: 14px;
          }
          .item-icon {
            img {
              max-height: 30px;
              max-width: 30px;
            }
          }
        }
      }
    }
    .errorText {
      font-size: 12px;
      font-family: Avenir Next;
      font-weight: 600;
      line-height: 14px;
      letter-spacing: 0;
      color: #cf3f1f;
      padding: 15px 0;
    }
    .Connect {
      height: 38px;
      font-size: 14px;
      background: #fad551;
      width: 200px;
      text-align: center;
      line-height: 38px;
      border-radius: 10px;
      margin: auto;
      cursor: pointer;
    }
    .errorHref {
      font-size: 12px;
      font-family: Roboto;
      font-weight: 500;
      line-height: 16px;
      letter-spacing: -0.2px;
      padding-bottom: 20px;
      a {
        color: #00ffb0;
        text-decoration: none;
      }
    }
  }
}
</style>